<template>
  <view>
    <action-bar :options="navOptions"></action-bar>
    <view class="manage_box">
      <!-- 全部数量及筛选 -->
      <view class="manage_box-num">
        <view class="manage_box-num-span">全部数量： {{ total }}</view>
        <view class="manage_box-num-screen">
          <view class="manage_box-num-screen-option">
            <image :src="baseImgUrl + '/manage/option.png'" mode=""></image>
          </view>
          <span class="manage_box-num-span" @click="open">筛选</span>
          <view class="manage_box-num-screen-traingle">
            <image :src="baseImgUrl + '/manage/triangle.png'" mode=""></image>
          </view>
        </view>
      </view>

      <view v-if="list.length > 0" :style="listContainerHeight">
        <scroll-view-y @refresh="refresh()" @getMore="getMore()" :pageNo="screening.pageNo"
          :pageSize="screening.pageSize" :total="total" :height="25">
          <template slot="scrollView_content">
            <view class="dist">
              <view class="manage_box-card" v-for="(item, index) in list" :key="index"
                @click.stop="navTo(item.projectId)">
                <view class="manage_box-card-top">
                  <!-- <view> -->
                  <!-- <view :style="{ backgroundImage: 'url('+ require + `(./icon/icon${item.serviceType}.png)` + ')' }">
                    </view> -->
                  <span>{{ item.serviceType == 1 ? '维护保养' : item.serviceType == 2 ? '消防安全评估' : item.serviceType == 3 ?
                    '竣工检测' : '年度检测' }}</span>
                  <!-- </view> -->
                  <view class="manage_box-card-state" :class="item.state == '1'
                    ? 'committed'
                    : item.state == '2'
                      ? 'success'
                      : 'error'
                    ">{{
                      item.state == "0"
                        ? "草稿"
                        : item.state == "1"
                          ? "已提交"
                          : "已结束"
                    }}</view>
                </view>
                <view class="manage_box-card-top">
                  <view class="manage_box-card-top-title">
                    {{ item.name }}
                  </view>
                </view>
                <view class="manage_box-card-top">
                  <view class="manage_box-card-top-times">
                    项目时间： {{ item.createTime | transformTimestamp }}
                  </view>
                </view>
                <view class="manage_box-card-centent">
                  <span>项目负责人：{{ item.projectHeadName || '暂无' }}</span>
                </view>
                <view class="manage_box-card-bottom">
                  <view class="item">
                    <span>{{ item.practiceCount }}</span>
                    <span>执业人次(人)</span>
                  </view>
                  <view class="item">
                    <span>{{ item.timeConsuming }}</span>
                    <span>执业时长</span>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </scroll-view-y>
      </view>
      <no-data v-else text="暂无项目"></no-data>
    </view>

    <!-- 筛选的弹出层 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-list">
        <uni-section title="筛选" type="circle">
          <form>
            <!-- 项目状态 -->
            <view class="formItem">
              <view class="label">项目状态</view>
              <picker mode="selector" class="content" :range="stateType" range-key="text"
                @change="stateTypeChange($event)">
                <view :style="{ color: screening.states ? '#333' : '#999' }">{{ screening.states || '请选择项目状态' }}
                </view>
              </picker>
            </view>

            <!-- 项目名称 -->
            <view class="formItem">
              <view class="label">项目名称</view>
              <input class="content" type="text" v-model="screening.name" :placeholder="'请选择项目名称'" />
            </view>

            <!-- 合同编号 -->
            <view class="formItem">
              <view class="label">合同编号</view>
              <input class="content" type="text" v-model="screening.no" :placeholder="'请选择合同编号'" />
            </view>

            <!-- 技术服务机构 -->
            <view class="formItem" v-if="judgmentRole('rescueOrganization')">
              <view class="label">技术服务机构</view>
              <input class="content" type="text" v-model="screening.agencyName" :placeholder="'请输入技术服务机构'" />
            </view>

            <!-- 合同编号 -->
            <view class="formItem">
              <view class="label">执业人员</view>
              <input class="content" type="text" v-model="screening.staffName" :placeholder="'请输入执业人员'" />
            </view>
          </form>
        </uni-section>
        <view class="popup-list-btn">
          <view class="btn" @click="close"> 取消 </view>
          <view class="btn" @click="sure"> 确定 </view>
        </view>
      </view>
    </uni-popup>
    <toast></toast>
  </view>
</template>

<script>
import { baseImgUrl } from "@/config.js";
import scrollViewY from "@/components/scrollViewY/index";
import dragButton from "@/components/drag-button/drag-button.vue";
export default {
  components: {
    scrollViewY,
    dragButton
  },
  filters: {
    transformTimestamp(timestamp) {
      let a = new Date(timestamp).getTime();
      const date = new Date(a);
      const Y = date.getFullYear() + "-";
      const M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      const D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "  ";
      const dateString = Y + M + D;
      return dateString;
    },
  },
  data() {
    return {
      // 筛选条件
      screening: {
        state: '', // 项目状态传参(0、草稿；1、已提交)【10-28与祖威确认状态参数就2个】
        states: '', // 项目状态展示
        no: '', // 合同编号
        staffName: "", // 执业人员
        agencyName: '',
        pageNo: 1, // 页码
        pageSize: 10, // 页数
      },
      // 筛选的项目状态
      stateType: [
        {
          value: "0",
          text: "草稿",
        },
        {
          value: "1",
          text: "已提交",
        },
      ],
      serverList: [], // 筛选的技术服务机构列表
      total: 0, // 全部数量
      dataStatus: "刷新", // 用于解决闪烁问题
      list: [], // 列表数据
      flag: false, // 页面是否是查看状态,默认不是
      baseImgUrl: baseImgUrl,
      navOptions: {
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "项目列表",
        },
      },
      // 项目负责人列表
      leaderList: [],
      loading: false,
    };
  },
  onLoad(options) {
    // 判断是否是查看项目
    if (options.flag) {
      this.flag = options.flag
    }
  },
  onShow() {
    this.list = [];
    this.getList().then((res) => {
      this.total = res.total;
      this.list = res.items;
    });
  },
  mounted() {
    // 判断是否查询技术服务机构列表
    let key = this.judgmentRole('rescueOrganization')
    if (key) this.getServerList();
    this.getLeaderListInfo()
  },
  provide() {
    return {
      getData: this.getList,
    };
  },
  computed: {
    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return (
        uni.getStorageSync("menuInfo").navigationBarHeight ||
        uni.getStorageSync("menuInfo").statusBarHeight / 2
      );
    },
    // 高度 =  100vh - 导航栏高度 - 状态栏高度 -  菜单高度
    listContainerHeight() {
      // 顶部状态栏 + 标题栏的高度 单位px
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      if (actionBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + navigationBarHeight + 50) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 160rpx);overflow: auto;";
      }
    },
  },
  methods: {
    navTo(item) {
      // 判断是否有项目id
      if (item != "") {
        // 判断是否是查看
        if (this.flag) {
          // 跳转查看
          uni.navigateTo({
            url: '../../pages_workTableChild/projectManage/form?id=' + item
          })
        } else {
          this.$store.dispatch("getDetailInfo", item).then((data) => {

            // 格式化回显项目负责人
            let newshowProjectHead;
            this.leaderList.forEach((item) => {
              if (data.projectHead == item.staffId) {
                newshowProjectHead = item.name;
              }
            });

            // 格式化回显技术负责人
            let newshowTechnologyHead;
            this.leaderList.forEach((item) => {
              if (data.technologyHead == item.staffId) {
                newshowTechnologyHead = item.name;
              }
            });

            // 参数处理
            let dist = {
              projectId: data.projectId, // 项目id
              name: data.name, // 项目名称
              serviceType: data.serviceType, // 服务类型
              type: data.type, // 项目类型

              projectHead: data.projectHead, // 项目负责人
              area: data.area, // 项目所在地区
              areaName: data.areaName, // 项目所在地区回显
              address: data.address, // 项目详细地址
              placeLonLat: data.placeLonLat, // 执业场所(经纬度)
              placeName: data.placeName, // 执业场所详细地址
              technologyHead: data.technologyHead, // 技术负责人
              staffIdList: data.staffIdList, // 执业人员
              // buildName: data.buildName, // 建筑使用用途
              entrustUnit: data.entrustUnit, // 委托单位
              entrustUnitPhone: data.entrustUnitPhone, // 委托单位联系电话
              entrustContact: data.entrustContact, // 委托单位联系人
              entrustContactPhone: data.entrustContactPhone, // 委托单位联系人电话
              areaCovered: data.areaCovered, // 占地面积(㎡)
              no: data.no, // 合同编号
              signDate: data.signDate, // 合同签订日期
              startDate: data.startDate, // 合同开始时间
              endDate: data.endDate, // 合同结束时间

              showLeader: newshowProjectHead, // 项目负责人回显
              showDirector: newshowTechnologyHead, // 技术负责人回显

              showSign: data.signDate, // 合同签订日期回显
              showStart: data.startDate, // 合同开始时间回显
              showEnd: data.endDate, // 合同结束时间回显
            };
            this.$store.commit("storeFirst", dist);
            // 服务对象列表
            let two = data.projectServeList;
            this.$store.commit("stroeTwo", two);
            // 合同列表
            let three = data.fileUrls;
            this.$store.commit("stroeThree", three);
          });
          // 跳转编辑
          uni.navigateTo({
            url: "../../pages_workTableChild/projectManage/register?id=" + item,
          });
        }
      } else {
        // 新增时校验是否通过审核
        this.$store.dispatch("checkProject").then(res => {
          if (res && res.code === 200) {
            this.$store.commit("storeFirst", null);
            this.$store.commit("stroeTwo", null);
            // 跳转新增
            uni.navigateTo({
              url: "../../pages_workTableChild/projectManage/register",
            });
          } else {
            // 弹出错误信息
            this.$showToast({
              show: true,
              text: res.msg
            })
          }
        })
      }
    },
    // 刷新数据
    refresh() {
      this.dataStatus = "刷新";
      this.screening.pageNo = 1;
      this.screening.state = "1";
    },
    // 上拉加载
    getMore() {
      if (this.screening.pageNo * this.screening.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.screening.pageNo++;
      }
    },

    // 获取信息列表
    getList() {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });
        this.$store.dispatch("getTaskList", this.screening).then((res) => {
          if (res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
      });
    },
    // 获取项目负责人-技术负责人-执业人员列表信息
    getLeaderListInfo() {
      let data = {
        pageNo: '-1',
        pageSize: '-1',
      };
      // 获取项目负责人-技术负责人列表
      this.$store.dispatch("getLeaderDepList", data).then((res) => {
        this.leaderList = res.data?.items;
      });
      // // 获取执业人员列表
      // data.personType = "2";
      // this.$store.dispatch("getLeaderList", data).then((res) => {
      //   this.practitionersList = res.data?.items;
      // });
    },
    open() {
      this.$refs.popup.open("top");
    },

    // 项目状态change
    stateTypeChange(e) {
      this.screening.state = this.stateType[e.detail.value].value;
      this.screening.states = this.stateType[e.detail.value].text;
    },
    // 技术服务机构change
    agencyTypeChange(e) {
      this.screening.agencyId = this.serverList[e.detail.value].agencyId;
      this.screening.agencyIds = this.serverList[e.detail.value].name;
    },
    // 筛选的取消按钮
    close() {
      this.$refs.popup.close();
    },
    // 筛选的确定按钮
    sure() {
      this.screening.pageNo = 1
      this.getList().then((res) => {
        this.total = res.total;
        this.list = res.items;
        this.$refs.popup.close();
      });
    },
    // 判断【新增项目】按钮是否展示
    judgment(key) {
      let authorityList = this.$store.state.login.authorityList
      let index = authorityList.includes(key)
      if (index) return true
      else return false
    },
    // 判断搜索条件【技术服务机构】是否展示
    judgmentRole(key) {
      let role = this.$store.state.login.userInfo
      let index = role.roles.includes(key)
      if (index) return true;
      else return false;
    },
    // 获取技术服务机构列表
    getServerList() {
      let that = this
      let dist = {
        pageNo: -1,
        pageSize: -1,
        state: '0,1,2,3',
      }
      this.$store.dispatch('getReviewedList', dist).then(({ data }) => {
        that.serverList = data.items
      })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.manage_box {
  padding: 0 24rpx;
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
  min-height: calc(100vh - 80rpx);

  &-num {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-content: center;
    height: 40px;
    line-height: 40px;

    &-span {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #fff;
    }

    &-screen {
      display: flex;
      justify-content: flex-start;
      flex-direction: row;

      &-option {
        width: 29rpx;
        height: 26rpx;
        margin-right: 9rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      &-traingle {
        margin-left: 14rpx;
        margin-top: -5rpx;
        width: 14rpx;
        height: 7rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .dist {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;

    .manage_box-card {
      width: 100%;
      background: #ffffff;
      height: 400rpx;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      position: relative;

      &-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }


      &-state {
        width: 100rpx;
        height: 47rpx;
        font-size: 20rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 47rpx;
        float: right;
        padding: 0 10rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .committed {
        background: #ECF7FF;
        color: #006EFE
      }

      .success {
        background: #E8FFE9;
        color: #06920E;
      }

      .error {
        background: #FFF4EE;
        color: #FF7F34;
      }

      &-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 14rpx;
        margin-left: 31rpx;

        &-title {
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
          font-family: Source Han Sans CN;
          word-break: break-all;
        }

        &-times {
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          font-family: Source Han Sans CN;
          color: #333333;
        }
      }

      &-centent {
        font-size: 26rpx;
        color: #666666;
        font-family: Source Han Sans CN;
        font-weight: 400;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        margin-top: 14rpx;
        margin-left: 31rpx;
      }

      &-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 14rpx 24rpx 0;

        .item {
          height: 126rpx;
          width: 314rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: #f6f6f6;
          border-radius: 17rpx;

          span:first-child {
            font-weight: 500;
            font-size: 36rpx;
            color: #333333;
          }

          span:last-child {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
          }
        }
      }
    }
  }
}

.popup-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 80rpx;
  padding: 0 20rpx 20rpx;

  /deep/.uni-section {
    margin-top: 0;
  }

  .formItem {
    display: flex;
    align-items: center;
    height: 80rpx;

    .label {
      color: #333;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 36rpx;
      width: 40%;
    }

    .content {
      flex: 1;
      text-align: right;
    }
  }

  &-btn {
    height: 80rpx;
    line-height: 80rpx;
    width: 100%;
    display: flex;

    .btn {
      flex: 1;
      text-align: center;
      border-radius: 20rpx;
      border: 1rpx solid $OVERALL_SITUATION_BACKGROUND;
      margin: 0 20rpx;
      background: $OVERALL_CLOSE_BUTTON_COLOR;
    }

    .btn:nth-child(2) {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      color: #ffffff;
    }
  }
}

::v-deep .input-placeholder {
  font-size: 28rpx;
  color: #999;
}
</style>
